<template>
  <div class="px-24px pt-18px">
    <!-- <div class="w-full h-320px"><img :src="CouponBanner" class="w-full h-full" alt="" /></div> -->
    <div class="flex items-center mt-20px">
      <img :src="CouponCenter1Icon" alt="" />
      <span class="font-medium text-22px tracking-wider text-white ml-5px">优惠券中心</span>
    </div>
    <div class="flex flex-wrap pb-30px">
      <coupon-list
        v-for="(item, index) in coupons"
        :key="item.id"
        :status="item.recieved"
        :data="item"
        :class="{
        'mr-38px': (index + 1) % 3! !== 0,
        'mt-16px': index > 2,
        'mt-8px': index <= 2

      }"
        @on-receive="onReceive(item)"
      >
        <template #timeout>
          <div class="text-10px mt-6px">{{ item.timeout }}</div>
        </template>
      </coupon-list>
    </div>
    <coupon-modal v-model:value="show" :canuse="canUse" @on:use="onUse" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
// import CouponBanner from '@renderer/assets/couponBanner.png'
import CouponCenter1Icon from '@renderer/assets/couponCenter_1.svg'
import CouponList from './components/list.vue'
import CouponModal from './components/modal.vue'
import useHttp from '@renderer/utils/http'
import dayjs from 'dayjs'
import { useUserStore } from '@renderer/store/modules/user'
import { useRouter } from 'vue-router'

const coupons = ref<any>([])

const show = ref<boolean>(false)

const user = useUserStore()

const router = useRouter()

let receiveing = false
const selectedItem = ref<any>(null)
const onReceive = async (item) => {
  if (!receiveing) {
    receiveing = true
    if (!user.GetToken) {
      return user.invokeLogin(false)
    }
    selectedItem.value = null
    const { data: res } = await useHttp('/coupon/c/create')
      .post({
        coupon: item.id,
        total: 1,
        code: item.code
      })
      .json()
    receiveing = false
    if (res.value.code === 200) {
      selectedItem.value = item
      show.value = true
      await init()
    } else if (res.value.code === 402) {
      await init()
    } else {
      selectedItem.value = item
      show.value = true
      await init()
    }
  }
}

const onUse = () => {
  router.replace({ name: 'CouponList', query: { id: selectedItem.value?.id } })
}

const canUse = computed(() => {
  console.log(selectedItem.value)
  return selectedItem.value?.include_spu && selectedItem.value?.include_spu !== 'null'
})
const init = async () => {
  const url = user.GetToken ? '/coupon/c/user/list' : '/coupon/c/list'
  const { data: res } = await useHttp(url).get().json()
  if (res.value.code === 200) {
    coupons.value = res.value.data.map((coupon) => {
      const {
        type,
        recharge_fee,
        give_fee,
        discount_condition_match,
        discount_condition_minus,
        discount_type,
        discount_number,
        discount_index,
        receive_begin,
        receive_end,
        poster
      } = coupon

      return {
        ...coupon,
        label: user.couponType.find((couponType) => couponType.value === type)?.label,
        url: JSON.parse(poster || '[]')?.[0]?.url,
        condition:
          type === 1
            ? discount_condition_match
              ? `满${discount_condition_match}`
              : '无门槛'
            : type === 2
            ? `充值${recharge_fee}`
            : type === 5
            ? '多功能室'
            : type === 4
            ? '电竞酒店'
            : type === 6
            ? '台球室'
            : '通宵上网',
        money:
          discount_type === 1
            ? `减_${discount_condition_minus}`
            : discount_type === 2
            ? `抵扣_${discount_number}`
            : discount_type === 3
            ? `$折_${discount_index}`
            : discount_type === 4
            ? `送_${give_fee}`
            : '$折_5',
        img: '',
        isAccumulate: false,
        timeout: `${dayjs(receive_begin).format('YYYY.MM.DD')}~${dayjs(receive_end).format(
          'YYYY.MM.DD'
        )}`
      }
    })
  }
}
onMounted(async () => {
  await init()
})
</script>

<style scoped></style>
